<template>
	<view class="self-pickup-wrap page_box">
		<!-- 定位自提点 -->
		<view class="pickup-location-box px20 head_box">
			<view class="location-title mb20">当前定位地点</view>
			<view class="x-bc">
				<view class="location-content" @tap="refreshGetLocation">
					{{ locationInfo.addressText || addressText }}
					<text class="iconfont icon-shuaxin ml10"></text>
				</view>
				<view class="other-address" @tap="$Router.push({ path: '/pages/app/store/search' })">
					其他地址
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
		<view class="content_box">
			<scroll-view scroll-y="true" class="scroll-box" @scrolltolower="loadmore">
				<!-- 当前自提点 -->
				<view class="store-card ma20 pa20" v-if="storeInfo.id">
					<view class="x-bc card-head">
						<view class="x-f">
							<view class="img-wrap mr20">
								<image class="store-img" :src="storeInfo.image_first" mode=""></image>
							</view>
							<view class="">
								<view class="store-title mb10">{{ storeInfo.name }}</view>
								<view class="store-dis x-f">
									<text class="buy-num">{{ storeInfo.buy_num }}</text>
									人已购买
									<text class="icon-line"></text>
									距您{{ storeInfo.distance_text }}
								</view>
							</view>
						</view>
						<button class="cu-btn  cur-btn">当前自提点</button>
					</view>
					<view class="store-address pt20">
						<text class="cuIcon-location mr10"></text>
						{{ storeInfo.address }}
					</view>
				</view>
				<!-- 附近自提点 -->
				<view class="near-store pa20">
					<view class="near-title">附近自提点</view>
					<view class="store-card ma20 pa20" v-for="item in storeList" :key="item.id">
						<view class="x-bc card-head">
							<view class="x-f">
								<view class="img-wrap mr20">
									<image class="store-img" :src="item.image_first" mode=""></image>
								</view>
								<view class="">
									<view class="store-title mb10">{{ item.name }}</view>
									<view class="store-dis x-f">
										<text class="buy-num">{{ item.buy_num }}</text>
										人已购买
										<text class="icon-line"></text>
										距您{{ item.distance_text }}
									</view>
								</view>
							</view>
							<button class="cu-btn  sel-btn" @tap="selectStore(item)">选这个</button>
						</view>
						<view class="store-address pt20">
							<text class="cuIcon-location mr10"></text>
							{{ item.address }}
						</view>
					</view>
					<!-- 更多 -->
					<u-loadmore v-if="storeList.length" height="80rpx" :status="loadStatus" icon-type="flower"
						color="#ccc" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		MAP_KEY
	} from '@/env.js';
	export default {
		components: {},
		data() {
			return {
				locationInfo: {},
				location: {}, //其他选择传过来
				addressText: '点击获取定位',
				storeInfo: uni.getStorageSync('storeInfo'),
				storeList: [],
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1
			};
		},
		computed: {},
		onLoad() {
			this.locationInfo = uni.getStorageSync('locationInfo') ? uni.getStorageSync('locationInfo') : {};
			if (this.locationInfo.lat) {
				this.storeList = [];
				this.getStoreAddress();
			}else {
				this.storeList = [];
				this.getLocation();
			}
		},
		onShow() {
			if (this.location.lat) {
				this.locationInfo = this.location;
				this.getStoreAddress();
			}
			// 测试用
			this.getNearStore();
		},

		methods: {
			loadmore() {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getNearStore();
				}
			},
			// 选择自提点
			selectStore(info) {
				this.storeInfo = info;
				this.$store.commit('STORE_INFO', info);
				this.$Router.back();
			},
			// 重置
			refreshGetLocation() {
				this.storeList = [];
				this.getLocation();
			},
			// 附近自提点
			getNearStore() {
				let that = this;
				that.storeList = []
				uni.showLoading({
					mask: true
				});
				this.$api('store.near', {
					latitude: this.locationInfo.lat,
					longitude: this.locationInfo.lng,
					page: this.currentPage
				}).then(res => {
					if (res.code === 1) {
						uni.hideLoading();
						that.storeList = [...that.storeList, ...res.data.data];
						that.lastPage = res.data.last_page;
						if (that.currentPage < res.data.last_page) {
							that.loadStatus = 'loadmore';
						} else {
							that.loadStatus = 'nomore';
						}
					}
				});
			},
			// 开启定位
			async getLocation() {
				// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ
				let status = await this.getSetting();
				if (status === 1) {
					this.openLocation();
					return;
				} else {
					if (status === 2) {
						this.addressText = '请开启定位权限';
						uni.showModal({
							title: '提示',
							content: '检测到您没打开此小程序的定位权限，是否去设置打开',
							success: res => {
								if (res.confirm) {
									this.openSetting();
									return;
								} else if (res.cancel) {}
							}
						});
					}
				}
				// #endif

				this.openLocation();
			},
			openLocation() {
				if (this.locationInfo.lat) {
					uni.chooseLocation({
						success: res => {
							console.log('成功1:', res);
							this.locationInfo.lng = res.longitude;
							this.locationInfo.lat = res.latitude;
							this.getStoreAddress();
						},
						fail: err => {
							console.log('chooseLocation:', err);
						}
					});
				} else {
					uni.getLocation({
						type: 'gcj02',
						success: res => {
							console.log('成功2:', res);
							this.locationInfo.lng = res.longitude;
							this.locationInfo.lat = res.latitude;
							this.getStoreAddress();
						},
						fail: err => {
							console.log('getLocation:', err);
						}
					});
				}
			},
			getSetting: function() {
				return new Promise((resolve, reject) => {
					uni.getSetting({
						success: res => {
							if (res.authSetting['scope.userLocation'] === undefined) {
								resolve(0);
								return;
							}
							if (res.authSetting['scope.userLocation']) {
								resolve(1);
							} else {
								resolve(2);
							}
						}
					});
				});
			},
			openSetting: function() {
				uni.openSetting({
					success: res => {
						if (res.authSetting && res.authSetting['scope.userLocation']) {
							this.openLocation();
						}
					},
					fail: err => {}
				});
			},
			//逆坐标解析
			async getStoreAddress() {
				this.storeList = []
				this.addressText = '定位中...';
				const [error, res] = await uni.request({
					url: `https://restapi.amap.com/v3/geocode/regeo?location=${this.locationInfo.lng},${this.locationInfo.lat}&key=${MAP_KEY}`
				});
				if (res.data.status === '1') {
					const data = res.data.regeocode.addressComponent;
					const text = `${data.city}${data.district}${data.township}`;
					console.log('成功3:', data);
					this.locationInfo = {
						...this.locationInfo,
						area: data.district,
						cityCode: data.citycode,
						addressText: text
					};
					uni.setStorageSync('locationInfo', this.locationInfo);
					this.getNearStore();
					this.location = {};
				} else {
					console.log('%c逆地址解析失败，请检查是否在env中配置地图key', 'color:green;background:yellow');
				}
			}
		}
	};
</script>

<style lang="scss">
	// 定位自提点
	.pickup-location-box {
		background-color: #fff;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.location-title {
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
		}

		.location-content {
			font-size: 28rpx;
			font-weight: bold;
			color: $t-mainColor;
		}

		.other-address {
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;
			white-space: nowrap;
		}
	}

	// 自提点卡片
	.store-card {
		background-color: #fff;
		box-shadow: 0 5rpx 25rpx 2rpx rgba(202, 202, 202, 0.14);
		border-radius: 10rpx;
		position: relative;

		.card-head {
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #eeeeee;
		}

		.img-wrap,
		.store-img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 6rpx;
			background-color: #ccc;
		}

		.store-title {
			font-size: 28rpx;
			font-weight: 600;
			color: #000000;
		}

		.store-dis {
			font-size: 24rpx;
			font-weight: 400;
			color: #b1b3c7;

			.buy-num {
				color: $t-mainColor;
			}

			.icon-line {
				display: inline-block;
				height: 30rpx;
				width: 1px;
				background-color: #b1b3c7;
				margin: 0 10rpx;
			}
		}
	
	.cur-btn {
			background: none;
			padding: 0;
			font-size: 26rpx;
			font-weight: 500;
			color: $t-mainColor;
			position: absolute;
			top: 0rpx;
			right: 20rpx;
		}

		.sel-btn {
			width: 138rpx;
			height: 60rpx;
			background: linear-gradient(to right, $t-gradualColor, $t-mainColor);
			border-radius: 30rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
			padding: 0;
		}

		.store-address {
			font-size: 22rpx;
			font-weight: 500;
			color: #999999;
		}
	}

	// 附近自提点
	.near-store {
		.near-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #000000;
		}
	}
</style>
